<template>
  <div>
    <el-card>
       <div class="userall">
      <div class="usertop">
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="请输入用户名"
          :suffix-icon="Search"
        />
      </div>
      <div class="userbuttom">
        <el-button type="primary" @click="showadduserdialog">新增</el-button>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" label="id" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column label="手机号">
        <template v-slot="scope">
          {{scope.row.phone?scope.row.phone:"未绑定"}}
        </template>
      </el-table-column>
      <el-table-column prop="start" label="状态">
        <template v-slot="scope">
          <el-switch
            @change="changeswitch(scope.row)"
            v-model="scope.row.state"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary">编辑</el-button>
          <el-button type="danger" @click="deleteloginuser(scope.row._id)"
            >删除</el-button
          >
          <el-button type="warning">查看个人信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加用户的弹出框 -->
    <el-dialog
      v-model="adduserdialog"
      title="添加用户"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="adduserinfo"
        style="max-width: 460px"
        :rules="loginrules"
        ref="ruleFormRef"
      >
        <img src="https://127.0.0.1:3000/update/diajhsdo" alt="" />
        <el-form-item label="用户名" prop="username">
          <el-input v-model="adduserinfo.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="adduserinfo.password" />
        </el-form-item>
        <el-form-item class="loginbuttom">
          <el-button type="primary" @click="adduser(ruleFormRef)"
            >新增用户</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
const tableData = ref([]);
const ruleFormRef = ref();
// 控制对话框的显示和隐藏
const adduserdialog = ref(false);
// 要添加用户的信息
const adduserinfo = ref({
  username: "",
  password: "",
});
// 要添加用户的表单验证
const loginrules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,
      max: 10,
      message: "请输入3个字符到10个之间的用户名",
      trigger: "blur",
    },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
onMounted(() => {
  getuserall();
});
// 获取所有用户
const getuserall = async () => {
  await axios.get("/api/user/userall").then((res) => {
    tableData.value = res.data.userall;
  });
};
//  修改用户状态
const changeswitch = async (data) => {
  let newdata = {
    id: data._id,
    start: data.state,
  };
  await axios.put("/api/user/loginstart", newdata).then((res) => {
    if (res.data.code == 200) {
      if (newdata.start) {
        ElMessage({
          message: "开启用户",
          type: "success",
        });
      } else {
        ElMessage.error("禁用用户");
      }
    }
  });
};
// 删除用户
const deleteloginuser = async (id) => {
  console.log(id);
  await axios.delete(`/api/user/deleteloginuser/${id}`).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      getuserall();
    }
  });
};
// 打开添加的对话框
const showadduserdialog = () => {
  adduserdialog.value = true;
};
// 添加用户的接口
const adduser = (formEl) => {
  console.log(formEl);
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      axios.post(`/api/user/user`, adduserinfo.value).then((res) => {
        if (res.data.code == 200) {
          adduserinfo.value = "";
          adduserdialog.value = false;
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          getuserall();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    } else {
      console.log("error submit!");
    }
  });
};
</script>

<style lang="less" scoped>
.usertop {
  width: 200px;
  margin-right: 40px;
}
.userall {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}
</style>